<template>
  <div class="upload-container">
    <view class="update-img" @click.stop="uploadFile">
      <el-image v-if="value === ''" v-loading="isLoading" :src="value === '' ? placeholder : value"
         fit="fill">
        <div slot="error" class="image-slot">
        </div>
      </el-image>
      <div v-else v-loading="isLoading" class="image">
        <el-image :src="value" fit="fill" />
        <div class="mask">
          <div class="actions">
            <span title="预览" @click.stop="dialogVisible = true">
              <i class="el-icon-zoom-in" />
            </span>
            <span title="移除" @click.stop="remove">
              <i class="el-icon-delete" />
            </span>
          </div>
        </div>
      </div>
    </view>
    <el-dialog :visible.sync="dialogVisible" title="预览" width="800px">
      <img :src="value" style="display: block; max-width: 100%; margin: 0 auto;">
    </el-dialog>
  </div>
</template>

<script>
  import SectionLoadingMixin from 'modules/mixins/section-loading'
  export default {
    name: 'UniImageUpload',
    mixins: [SectionLoadingMixin],
    props: {
      value: {
        type: String,
        default: ''
      },
      mediaType: {
        type: String,
        default: 'image'
      },
      placeholder: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        dialogVisible: false
      }
    },
    methods: {
      // 移除
      remove() {
        this.$emit('update:data', '')
      },
      uploadFile(){
      	let type = this.mediaType;
      	let fileType;
      	let extension = [];
      	if(type === "image"){
      		extension = ["png", "jpg", "jpeg", "gif", "bmp", "svg", "webp", "jfif", "dpg"];
      		fileType = "image";
      	}else if(type === "video"){
      		extension = ["avi", "mp3", "mp4", "3gp", "mov", "rmvb", "rm", "flv", "mkv", "wmv", "m3u8", "mpg", "mpeg", "dat", "asf"];
      		fileType = "video";
      	}else if(type === "other"){
      		extension = ["txt","pdf","xls","xlsx","ppt","pptx","doc","docx","rar","zip"];
      	}
      	uni.chooseFile({
      		extension,
      		success: async res => {
      			const uploadRes = await vk.uploadFile({
      				filePath: res.tempFilePaths[0],
      				file: res.tempFiles[0],
      				needSave: true,
      				fileType
      			});
            this.imageUrl = uploadRes.url
            this.$emit('success', this.imageUrl)
            this.$emit('input', this.imageUrl)
          }
      	});
      }
    }
  }
</script>

<style lang="scss" scoped>
  .update-img {
    width: 80px;
    height: 80px;
    border: 1px solid #e4e2e2;
    cursor: pointer;
    background-color: transparent;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #d5d5de;

    &::before {
      line-height: 1;
      font-size: 45px;
      content: "+";
    }

    &::after {
      content: "上传";
      font-size: 12px;
    }
  }
  .image {
    position: relative;

    .mask {
      opacity: 0;
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      font-size: 24px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: all 0.3s;

      .actions {
        width: 100px;
        height: 100px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        position: absolute;
        justify-content: center;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);

        span {
          width: 50%;
          text-align: center;
          color: #fff;
          cursor: pointer;
          transition: all 0.1s;

          &.disabled {
            color: #999;
            cursor: not-allowed;
          }

          &:hover:not(.disabled) {
            transform: scale(1.5);
          }
        }
      }
    }

    &:hover .mask {
      opacity: 1;
    }
  }

  ::v-deep .el-upload {
    width: auto;

    .el-upload-dragger {
      width: auto;
      height: auto;

      &.is-dragover {
        border-width: 1px;
      }

      .el-image {
        display: block;

        .image-slot {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          color: #909399;
          font-size: 30px;
          background-color: transparent;
        }
      }

      .progress {
        position: absolute;
        top: 0;

        &::after {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          background-color: rgba(0, 0, 0, 0.2);
        }

        .el-progress {
          z-index: 1;
          left: 50%;
          top: 50%;
          position: absolute;
          transform: translateX(-50%) translateY(-50%);

          .el-progress__text {
            color: #fff;
          }
        }
      }
    }
  }
</style>